<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Liujingjing
 * @LastEditTime: 2022-01-07 15:22:05
-->
<template>
  <div ref="right2_container" style="height: 100%">
    <!-- <h2 class="title">右侧二个</h2>
    {{ ed }}
    <ul class="list">
      <li v-for="d in devices" :key="d.id">
        <span>{{ d.pm10 }}</span>
        <span>{{ d.pm25 }}</span>
      </li>
    </ul> -->
  </div>
</template>
<script>
//获取请求工具
import { get } from "../../../utils/request";
import { mapState } from "vuex";
import { Gauge } from "@antv/g2plot";
export default {
  // //监听器
  // watch: {
  //   ed: {
  //     handler() {
  //       this.loadData();
  //     },
  //     deep: true, //深度监听
  //   },
  // },
  // //计算属性
  // computed: {
  //   ...mapState(["ed"]),
  // },

  //生命周期钩子，表示当页面渲染完毕时执行
  mounted() {
    // this.loadData();
    this.initChart();
  },

  //数据，必须返回一个数据，在这个对象中定义页面中需要的变量
  data() {
    return {
      // //声明一个变量，初始值为空数组
      // devices: [],
      dataArr: [],
      percent:0
    }
  },

  //方法，可以在生命周期中调用，或被事件触发
  methods: {
    initChart() {
      const ticks = [0, 1 / 3, 2 / 3, 1];
      const color = ["#F4664A", "#FAAD14", "#30BF78"];
      const gauge = new Gauge(this.$refs.right2_container, {
        percent: this.percent,
        range: {
          ticks: [0, 1],
          color: ["l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78"],
        },
        
        indicator: {
          pointer: {
            style: {
              stroke: "#D0D0D0",
            },
          },
          pin: {
            style: {
              stroke: "#D0D0D0",
            },
          },
        },
        statistic: {
          title: {
            formatter: ({ percent }) => {
              if (percent < ticks[1]) {
                return "差";
              }
              if (percent < ticks[2]) {
                return "中";
              }
              return "优";
            },
            style: ({ percent }) => {
              return {
                fontSize: "26px",
                lineHeight: 1,
                color:
                  percent < ticks[1]
                    ? color[0]
                    : percent < ticks[2]
                    ? color[1]
                    : color[2],
              };
            },
          },
          content: {
            offsetY: 16,
            style: {
              fontSize: "14px",
              color: "#4B535E",
            },
            formatter: () => "空气质量",
          },
        },
      });

      gauge.render();
      setInterval(()=>{
        if(this.percent < 0.5){
          this.percent+=0.01;
          gauge.changeData(this.percent)
        }else{
          this.percent =0.5
        }

      },50)
    }
    // //加载数据-与后台交互获取设备数据
    // loadData() {
    //   let url =
    //     "http://127.0.0.1:7001/dashboard/pageQueryTodayData?page=1&pageSize=5";
    //   get(url).then((resp) => {
    //     //resp后台返回给我们的结果
    //     this.devices = resp.data.list;
    //   });
    // },
  }
}
</script>
<style scoped>
.title {
  text-align: center;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.list > li {
  line-height: 2em;
  border-bottom: 1px solid #f4f4f4;
}
</style>
